<template>
  <div
    class="wrap-item"
    :style="{
      '--scroll-width': '40px',
    }"
  >
    <div class="wrap-other-roll">
      <!-- 基础信息 -->
      <div class="card">
        <div class="title">基础信息</div>
        <el-table :data="basic" border>
          <el-table-column
            type="index"
            width="50"
            label="序号"
            align="center"
          ></el-table-column>
          <el-table-column prop="apiName" label="接口名称"></el-table-column>
          <el-table-column prop="method" label="接口英文名称"></el-table-column>
          <el-table-column prop="type" label="接口分类"></el-table-column>
          <el-table-column prop="url" label="接口地址"></el-table-column>
          <el-table-column prop="apiDesc" label="接口描述"></el-table-column>
        </el-table>
      </div>
      <!-- 请求头 -->
      <div class="card">
        <div class="title">请求头</div>
        <el-table :data="tableData.head" border>
          <el-table-column
            type="index"
            width="50"
            label="序号"
            align="center"
          ></el-table-column>
          <el-table-column prop="name" label="请求头名称"></el-table-column>
          <el-table-column
            prop="contentType"
            label="请求头类型"
          ></el-table-column>
        </el-table>
      </div>
      <!-- 请求参数 -->
      <div class="card">
        <div class="title">请求参数</div>
        <el-table :data="tableData.requestParamters" border>
          <el-table-column
            type="index"
            width="50"
            label="序号"
            align="center"
          ></el-table-column>
          <el-table-column prop="name" label="参数名称"></el-table-column>
          <el-table-column prop="type" label="参数类型"></el-table-column>
          <el-table-column prop="required" label="是否必填"></el-table-column>
          <el-table-column prop="desc" label="参数说明"></el-table-column>
        </el-table>
      </div>
      <!-- 响应参数 -->
      <div class="card">
        <div class="title">响应参数</div>
        <el-table :data="tableData.responseParamters" border>
          <el-table-column
            type="index"
            width="50"
            label="序号"
            align="center"
          ></el-table-column>
          <el-table-column prop="name" label="参数名称"></el-table-column>
          <el-table-column prop="type" label="参数类型"></el-table-column>
          <el-table-column prop="desc" label="参数说明"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return { basic: [], tableData: {} }
  },
  created() {
    this.itemList()
  },
  methods: {
    itemList() {
      this.$axios
        .get('/admin/apis/find?flag=false&id=' + this.$route.query.id)
        .then((data) => {
          if (data.code == 200) {
            this.basic.push(data.data)
            this.tableData = data.data.doc
          } else {
            this.$message.error(data.msg)
          }
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.card {
  padding-bottom: 20px;
}
.title {
  color: #45ab49;
  border-bottom: 1px solid #45ab49;
  padding: 10px 0;
  margin-bottom: 15px;
}
.handle {
  float: right;
}
</style>
